<!--用户中心-->
<script setup>
import {ElementUtils} from "@/assets/js/ElementUtils";
import {routeNameIn} from "@/assets/js/routerUtils";
import {setWindowTitle} from "@/assets/js/TitleUtils";
import {setupMapActions, setupMapState} from "@/assets/js/vuexUtils";
import AccountStatusSpan from "@/components/common/AccountStatusSpan.vue";
import ForumLink from "@/components/common/link/ForumLink.vue";
import UserLink from "@/components/common/link/UserLink.vue";
import UserMoney from "@/components/common/UserMoney.vue";
import UserMedals from "@/components/user/UserMedals.vue";
import {routeNames} from "@/router";
import {formatDate} from "@ginstone/common-utils/dist/src/utils/DateUtils";
import {onMounted, ref, watch} from "vue";
import {useRoute} from "vue-router";
import ContentRender from "@/components/content/ContentRender.vue";
import UserSpeechLink from "@/components/common/link/UserSpeechLink.vue";
import {useStore} from "vuex";
import SignatureDialog from "@/components/common/dialog/SignatureDialog.vue";
import {UserBuffType} from "@ginstone/nga-api/dist/src/enums/UserBuffType";
import ItemTabs from "@/components/item/ItemTabs.vue";

const {center, center2} = routeNames.user
const route = useRoute()
const {userInfoGetByName, userInfoGetById} = setupMapActions("User", ['userInfoGetById', 'userInfoGetByName'])
const {accountStatus} = setupMapState("User", ["accountStatus"])
const {currentUid} = setupMapState("Account", ['currentUid']);
const store = useStore();
const showDialog = (name, data) => store.commit("Dialog/showDialog", {name, data})

const buffTimestampFormat = "MM-dd hh:mm"
// 从链接中获取版面名称
const forumNamePattern = /<b>(.+?)\(/

const userInfo = ref();
// 总互动数
const recommends = ref(0);
setWindowTitle("用户中心")

// 从路由中提取参数执行请求
const request = (rou, force) => {
  const loading = ElementUtils.loading({target: "#content",})
  const {id: userId, name: username} = rou.params
  // 选择对应的请求方法
  const method = (rou.name === center) ? userInfoGetById : userInfoGetByName
  const param = (rou.name === center) ? {id: userId, force} : {username, force}
  method(param).then(res => {
    userInfo.value = res;
    setWindowTitle(res.username + " - 用户中心")
    console.log(res)
  }).catch(ElementUtils.exceptionHandler).finally(() => {
    loading.close()
  })
}

onMounted(() => {
  request(route)
})

watch(route, (nv) => {
  if (routeNameIn(nv, center, center2)) {
    request(nv)
  }
})

</script>

<template>
  <div id="content">
    <div v-if="userInfo">
      <user-link :user-id="userInfo.userId" :username="userInfo.username">
        <h2>
          {{ userInfo.username }}
        </h2>
      </user-link>
      <!--用户信息-->
      <div>
        <h2>用户信息</h2>
        <el-descriptions :column="3">
          <el-descriptions-item v-if="userInfo.accountStatus || accountStatus[userInfo.userId]" label="账号状态">
            <account-status-span :status="userInfo.accountStatus || accountStatus[userInfo.userId]"/>
          </el-descriptions-item>
          <el-descriptions-item v-if="userInfo.regDatetime" label="注册时间">{{ formatDate(userInfo.regDatetime) }}</el-descriptions-item>
          <el-descriptions-item v-if="userInfo.postCount" label="发帖数">{{ userInfo.postCount }}</el-descriptions-item>
          <el-descriptions-item v-if="userInfo.prestige || userInfo.fame" label="用户组">{{ userInfo.groupName }} ({{ userInfo.memberId }})</el-descriptions-item>
          <el-descriptions-item v-if="userInfo.prestige || userInfo.fame" label="威望">{{ (userInfo.prestige || userInfo.fame) / 10 }}</el-descriptions-item>
          <el-descriptions-item v-if="userInfo.ipLocation" label="IP属地">{{ userInfo.ipLocation }}</el-descriptions-item>
          <el-descriptions-item v-if="userInfo.interactions" label="总互动数">{{ userInfo.interactions }}</el-descriptions-item>
          <el-descriptions-item v-if="userInfo.money && userInfo.money.raw" label="货币">
            <user-money :data="userInfo.money"/>
          </el-descriptions-item>
          <el-descriptions-item v-if="userInfo.userForum" label="个人版面">
            <forum-link :forum-id="-1*userInfo.userId">{{ userInfo.userForum }}</forum-link>
          </el-descriptions-item>
          <el-descriptions-item v-if="userInfo.followCount" label="关注数">{{ userInfo.followCount }}</el-descriptions-item>
          <el-descriptions-item v-if="userInfo.followedCount" label="被关注数">{{ userInfo.followedCount }}</el-descriptions-item>
          <el-descriptions-item v-if="userInfo.email" label="E-mail">{{ userInfo.email }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <!--用户发言-->
      <div>
        <h2>用户发言</h2>
        <user-speech-link :user-id="userInfo.userId" bracket class="ops-link">用户主题</user-speech-link>
        <user-speech-link :user-id="userInfo.userId" bracket class="ops-link" search-reply>用户回复</user-speech-link>
      </div>
      <!--用户状态-->
      <div v-if="userInfo.buffs">
        <h2>用户状态</h2>
        <div v-for="buff in userInfo.buffs">
          <li>
            <span v-if="buff.type===UserBuffType.MUTED">
              <template v-if="buff.extraData">
                在
                <forum-link :forum-id="buff.extraData"> [{{ forumNamePattern.exec(buff.description)[1] }}]</forum-link>
                版面被禁言
              </template>
              <template v-else>
                全版禁言
              </template>
              ：
              {{ formatDate(buff.start, buffTimestampFormat) }} ~ {{ formatDate(buff.end, buffTimestampFormat) }}
            </span>
            <span v-else-if="buff.type===UserBuffType.REPUTATION_MUTED">
              在<span> [{{ forumNamePattern.exec(buff.description)[1] }}]</span> 声望被禁言
              ：
              {{ formatDate(buff.start, buffTimestampFormat) }} ~ {{ formatDate(buff.end, buffTimestampFormat) }}
            </span>
            <el-tooltip v-else placement="right-end">
              {{ buff.description }}
              <template #content>
                起:
                {{ formatDate(buff.start, buffTimestampFormat) }}
                <br>
                止:
                {{ formatDate(buff.end, buffTimestampFormat) }}
              </template>
            </el-tooltip>
          </li>
        </div>
      </div>
      <!--荣誉-->
      <div v-if="userInfo.honor">
        <h2>荣誉</h2>
        <el-descriptions :column="3">
          <el-descriptions-item v-if="userInfo.honor.name" label="名称">{{ userInfo.honor.name }}</el-descriptions-item>
          <el-descriptions-item v-if="userInfo.honor.remark" label="备注">{{ userInfo.honor.remark }}</el-descriptions-item>
          <el-descriptions-item v-if="userInfo.honor.timestamp" label="获得时间">{{ formatDate(userInfo.honor.timestamp) }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <!--徽章-->
      <div v-if="userInfo.medal">
        <h2>徽章({{ userInfo.medal.length }})</h2>
        <user-medals :data="userInfo.medal"/>
      </div>
      <!--声望-->
      <div v-if="userInfo.reputations">
        <h2>声望({{ userInfo.reputations.length }})</h2>
        <ul>
          <li v-for="{name,value,remark} in userInfo.reputations">
            <span>{{ name }}: </span>
            <span style="font-weight: bold">{{ value }}</span>
            <span v-if="remark"> - {{ remark }}</span>
          </li>
        </ul>
      </div>
      <!--管理权限-->
      <div v-if="userInfo.adminForums">
        <h2>管理权限({{ Object.keys(userInfo.adminForums).length }})</h2>
        该用户持有如下版面的管理权限:
        <ul>
          <li v-for="(name,forumId) in userInfo.adminForums">
            <forum-link :forum-id="Number(forumId)">{{ name }}</forum-link>
          </li>
        </ul>
      </div>
      <!--头像-->
      <div v-if="userInfo.avatars">
        <h2>头像({{ userInfo.avatars.length }})</h2>
        <img v-for="avatar in userInfo.avatars" :src="avatar.replace('https://img.nga.178.com','')" alt="" style="max-width: 20%"/>
      </div>
      <!--签名-->
      <div v-if="userInfo.signature">
        <h2>签名 -
          <el-button type="primary" @click="showDialog('signature_set',userInfo)">设置</el-button>
        </h2>
        <div class="nga-quote">
          <content-render :data="userInfo.signatureNodes"/>
        </div>
      </div>
      <!--签名-->
      <div v-if="userInfo.userId===currentUid">
        <h2>道具</h2>
        <div class="nga-quote">
          <item-tabs/>
        </div>
      </div>
    </div>

    <signature-dialog/>
  </div>
</template>

<style scoped>
#content {
  min-height: 300px;
  text-align: left;
}

.ops-link {
  margin-right: 3px;
}

</style>